html .main,
body .main {
  width: 1190px;
  margin: 0 auto;
}

html header .h-nav,
body header .h-nav {
  background-color: #f9f9f9;
}

html header .h-nav nav,
body header .h-nav nav {
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

html header .h-nav nav ul,
body header .h-nav nav ul {
  display: flex;
  align-items: center;
}

html header .h-nav nav ul li,
body header .h-nav nav ul li {
  font-size: 12px;
  color: #666;
}

html header .h-nav nav ul li span,
body header .h-nav nav ul li span {
  font-size: 12px;
  color: #666;
}

html header .h-nav nav ul li a,
body header .h-nav nav ul li a {
  font-size: 12px;
  color: #666;
  margin: 0px 10px;
}

html header .h-nav nav ul li a:hover,
body header .h-nav nav ul li a:hover {
  color: #f74a4a;
  text-decoration: underline;
}

html header .h-nav nav .left-nav li:first-child,
body header .h-nav nav .left-nav li:first-child {
  display: flex;
}

html header .h-nav nav .left-nav li:first-child i,
body header .h-nav nav .left-nav li:first-child i {
  display: block;
  background: url(../images/index/sprite1.png) no-repeat 0 0;
  width: 11px;
  height: 15px;
}

html header .h-nav nav .left-nav li:first-child a,
body header .h-nav nav .left-nav li:first-child a {
  margin-left: 3px;
}

html header .h-nav nav .right-nav li:first-child a,
body header .h-nav nav .right-nav li:first-child a {
  margin-left: 0px;
}

html header .h-nav nav .right-nav li:last-child,
body header .h-nav nav .right-nav li:last-child {
  width: 80px;
  height: 18px;
  background-color: #fff;
  border: 1px solid #e7e8e7;
  margin-left: 10px;
}

html header .h-nav nav .right-nav li:last-child a,
body header .h-nav nav .right-nav li:last-child a {
  margin-left: 5px;
  line-height: 18px;
}

html header .h-nav nav .right-nav li:last-child i,
body header .h-nav nav .right-nav li:last-child i {
  display: inline-block;
  background: url(../images/index/sprite1.png) no-repeat 0px -57px;
  width: 12px;
  height: 8px;
}

html header .logo-search,
body header .logo-search {
  height: 124px;
  display: flex;
  align-items: center;
}

html header .logo-search .logo,
body header .logo-search .logo {
  background: url(../images/index/sprite2.png) no-repeat -19px -7px;
  width: 261px;
  height: 49px;
}

html header .logo-search .searchBtn,
body header .logo-search .searchBtn {
  display: flex;
  align-items: center;
  margin: 0px 50px 0px 150px;
}

html header .logo-search .searchBtn .searchBox,
body header .logo-search .searchBtn .searchBox {
  height: 39px;
  display: flex;
  border-right: none;
}

html header .logo-search .searchBtn .searchBox .seclectGame,
body header .logo-search .searchBtn .searchBox .seclectGame {
  width: 118px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  border: 2px solid #f74a4a;
  border-right: none;
}

html header .logo-search .searchBtn .searchBox .seclectGame span,
body header .logo-search .searchBtn .searchBox .seclectGame span {
  color: #333;
}

html header .logo-search .searchBtn .searchBox .seclectGame i,
body header .logo-search .searchBtn .searchBox .seclectGame i {
  display: inline-block;
  background: url(../images/index/sprite1.png) no-repeat 0 -25px;
  width: 9px;
  height: 6px;
  margin-left: 25px;
}

html header .logo-search .searchBtn .searchBox .seclectGame:hover i,
body header .logo-search .searchBtn .searchBox .seclectGame:hover i {
  background: url(../images/index/sprite1.png) no-repeat -20px -24px;
}

html header .logo-search .searchBtn .searchBox input,
body header .logo-search .searchBtn .searchBox input {
  width: 333px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 12px;
  border: 2px solid #f74a4a;
  border-left: 1px solid #efefef;
}

html header .logo-search .searchBtn .searchBox > .sec,
body header .logo-search .searchBtn .searchBox > .sec {
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-radius: 3px;
}

html header .logo-search .searchBtn button,
body header .logo-search .searchBtn button {
  border: none;
  background: url(../images/index/sprite5.png) no-repeat 0 0;
  width: 38px;
  height: 40px;
}

html header .logo-search .searchBtn button:hover,
body header .logo-search .searchBtn button:hover {
  background: url(../images/index/sprite5.png) no-repeat -39px 0;
  width: 38px;
  height: 40px;
}

html header .gameNav,
body header .gameNav {
  width: 100%;
  height: 62px;
  background-color: #3b3f4a;
}

html header .gameNav .gameBox,
body header .gameNav .gameBox {
  height: 62px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

html header .gameNav .gameBox .allGame,
body header .gameNav .gameBox .allGame {
  height: 62px;
  width: 190px;
  background-color: #eb4c4c;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ff8184;
}

html header .gameNav .gameBox .allGame i,
body header .gameNav .gameBox .allGame i {
  margin-right: 5px;
  display: inline-block;
  background: url(../images/index/sprite1.png) no-repeat 0 -177px;
  width: 20px;
  height: 26px;
}

html header .gameNav .gameBox .list,
body header .gameNav .gameBox .list {
  height: 62px;
  display: flex;
}

html header .gameNav .gameBox .list li,
body header .gameNav .gameBox .list li {
  width: 126px;
  height: 62px;
  text-align: center;
  line-height: 62px;
}

html header .gameNav .gameBox .list li a,
body header .gameNav .gameBox .list li a {
  color: #fff;
}

html header .gameNav .gameBox .list li:hover,
body header .gameNav .gameBox .list li:hover {
  background-color: #f74b4b;
}

html header .gameNav .gameBox .cart,
body header .gameNav .gameBox .cart {
  margin-left: 14px;
  height: 50px;
  width: 230px;
  background: #eb4d4c;
  box-sizing: border-box;
  display: flex;
  position: relative;
}

html header .gameNav .gameBox .cart a,
body header .gameNav .gameBox .cart a {
  display: flex;
}

html header .gameNav .gameBox .cart a .cartBox,
body header .gameNav .gameBox .cart a .cartBox {
  width: 159px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #e04040;
}

html header .gameNav .gameBox .cart a .cartBox i,
body header .gameNav .gameBox .cart a .cartBox i {
  display: inline-block;
  background: url(../images/index/sprite1.png) no-repeat -60px -20px;
  width: 20px;
  height: 16px;
  margin-right: 10px;
}

html header .gameNav .gameBox .cart a .cartBox span,
body header .gameNav .gameBox .cart a .cartBox span {
  color: #fff;
}

html header .gameNav .gameBox .cart a #num,
body header .gameNav .gameBox .cart a #num {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}

html header .gameNav .gameBox .cart .cartInfo,
body header .gameNav .gameBox .cart .cartInfo {
  display: none;
  position: absolute;
  top: 50px;
  right: 0;
  width: 672px;
  border: 1px solid #e8e8e8;
  background-color: #fff;
  padding: 5px;
  box-sizing: border-box;
  z-index: 999;
}

html header .gameNav .gameBox .cart .cartInfo table,
body header .gameNav .gameBox .cart .cartInfo table {
  width: 672px;
}

html header .gameNav .gameBox .cart .cartInfo table th,
html header .gameNav .gameBox .cart .cartInfo table td,
body header .gameNav .gameBox .cart .cartInfo table th,
body header .gameNav .gameBox .cart .cartInfo table td {
  width: 168;
  text-align: center;
}

html header .gameNav .gameBox .cart .cartInfo table th,
body header .gameNav .gameBox .cart .cartInfo table th {
  height: 36px;
}

html header .gameNav .gameBox .cart .cartInfo table td,
body header .gameNav .gameBox .cart .cartInfo table td {
  height: 20px;
  font-size: 14px;
}

html header .gameNav .gameBox .cart:hover .cartInfo,
body header .gameNav .gameBox .cart:hover .cartInfo {
  display: block;
}

html header .bannerBox,
body header .bannerBox {
  background: url(../images/index/wrap_bg.png);
}

html header .bannerBox .h-content,
body header .bannerBox .h-content {
  display: flex;
  height: 330px;
}

html header .bannerBox .h-content .left-list,
body header .bannerBox .h-content .left-list {
  height: 330px;
  width: 190px;
  background-color: pink;
}

html header .bannerBox .h-content .left-list ul li,
body header .bannerBox .h-content .left-list ul li {
  height: 65px;
  background-color: #f55656;
  border-bottom: 1px solid #ee4545;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

html header .bannerBox .h-content .left-list ul li i,
body header .bannerBox .h-content .left-list ul li i {
  display: inline-block;
  height: 26px;
}

html header .bannerBox .h-content .left-list ul li span,
body header .bannerBox .h-content .left-list ul li span {
  color: #fff;
  font-size: 16px;
  margin-left: 12px;
}

html header .bannerBox .h-content .left-list ul li .gameList,
body header .bannerBox .h-content .left-list ul li .gameList {
  display: none;
  height: 330px;
  position: absolute;
  padding: 8px 0px;
  box-sizing: border-box;
  background-color: #fff;
  top: 0px;
  left: 190px;
  z-index: 999;
}

html header .bannerBox .h-content .left-list ul li .gameList div,
body header .bannerBox .h-content .left-list ul li .gameList div {
  width: 140px;
  height: 330px;
  float: left;
  padding: 0px 18px;
  box-sizing: border-box;
}

html header .bannerBox .h-content .left-list ul li .gameList div p,
body header .bannerBox .h-content .left-list ul li .gameList div p {
  margin: 12px 0px;
}

html header .bannerBox .h-content .left-list ul li .gameList div p a,
body header .bannerBox .h-content .left-list ul li .gameList div p a {
  color: #3a3f4a;
  font-size: 12px;
}

html header .bannerBox .h-content .left-list ul li .gameList div p a:hover,
body header .bannerBox .h-content .left-list ul li .gameList div p a:hover {
  color: #f74a4a;
  text-decoration: underline;
}

html header .bannerBox .h-content .left-list ul li .gameList1,
body header .bannerBox .h-content .left-list ul li .gameList1 {
  width: 280px;
}

html header .bannerBox .h-content .left-list ul li .gameList2,
body header .bannerBox .h-content .left-list ul li .gameList2 {
  width: 420px;
  top: -66px;
}

html header .bannerBox .h-content .left-list ul li .gameList3,
body header .bannerBox .h-content .left-list ul li .gameList3 {
  width: 280px;
  top: -132px;
}

html header .bannerBox .h-content .left-list ul li .gameList4,
body header .bannerBox .h-content .left-list ul li .gameList4 {
  width: 140px;
  top: -198px;
}

html header .bannerBox .h-content .left-list ul li .gameList5,
body header .bannerBox .h-content .left-list ul li .gameList5 {
  width: 140px;
  top: -264px;
}

html header .bannerBox .h-content .left-list ul li:hover,
body header .bannerBox .h-content .left-list ul li:hover {
  background-color: #fff;
  border-bottom: 1px solid #f3f4f6;
}

html header .bannerBox .h-content .left-list ul li:hover .gameList,
body header .bannerBox .h-content .left-list ul li:hover .gameList {
  display: block;
}

html header .bannerBox .h-content .left-list ul li:hover span,
body header .bannerBox .h-content .left-list ul li:hover span {
  color: #000;
}

html header .bannerBox .h-content .left-list ul li:nth-child(1) i,
body header .bannerBox .h-content .left-list ul li:nth-child(1) i {
  background: url(../images/index/sprite1.png) no-repeat -148px -177px;
  width: 21px;
}

html header .bannerBox .h-content .left-list ul li:nth-child(1):hover i,
body header .bannerBox .h-content .left-list ul li:nth-child(1):hover i {
  background: url(../images/index/sprite1.png) no-repeat -148px -210px;
}

html header .bannerBox .h-content .left-list ul li:nth-child(2) i,
body header .bannerBox .h-content .left-list ul li:nth-child(2) i {
  background: url(../images/index/sprite1.png) no-repeat -29px -177px;
  width: 21px;
}

html header .bannerBox .h-content .left-list ul li:nth-child(2):hover i,
body header .bannerBox .h-content .left-list ul li:nth-child(2):hover i {
  background: url(../images/index/sprite1.png) no-repeat -29px -208px;
}

html header .bannerBox .h-content .left-list ul li:nth-child(3) i,
body header .bannerBox .h-content .left-list ul li:nth-child(3) i {
  background: url(../images/index/sprite1.png) no-repeat -60px -177px;
  width: 23px;
}

html header .bannerBox .h-content .left-list ul li:nth-child(3):hover i,
body header .bannerBox .h-content .left-list ul li:nth-child(3):hover i {
  background: url(../images/index/sprite1.png) no-repeat -60px -209px;
}

html header .bannerBox .h-content .left-list ul li:nth-child(4) i,
body header .bannerBox .h-content .left-list ul li:nth-child(4) i {
  background: url(../images/index/sprite1.png) no-repeat -89px -177px;
  width: 21px;
}

html header .bannerBox .h-content .left-list ul li:nth-child(4):hover i,
body header .bannerBox .h-content .left-list ul li:nth-child(4):hover i {
  background: url(../images/index/sprite1.png) no-repeat -89px -210px;
}

html header .bannerBox .h-content .left-list ul li:nth-child(5) i,
body header .bannerBox .h-content .left-list ul li:nth-child(5) i {
  background: url(../images/index/sprite1.png) no-repeat -120px -177px;
  width: 21px;
}

html header .bannerBox .h-content .left-list ul li:nth-child(5):hover i,
body header .bannerBox .h-content .left-list ul li:nth-child(5):hover i {
  background: url(../images/index/sprite1.png) no-repeat -120px -210px;
}

html header .bannerBox .h-content .banner,
body header .bannerBox .h-content .banner {
  height: 330px;
  width: 770px;
  background-color: skyblue;
  position: relative;
}

html header .bannerBox .h-content .banner .screen,
body header .bannerBox .h-content .banner .screen {
  width: 770px;
  height: 330px;
  overflow: hidden;
  position: relative;
}

html header .bannerBox .h-content .banner .screen ul,
body header .bannerBox .h-content .banner .screen ul {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 4620px;
}

html header .bannerBox .h-content .banner .screen ul li,
body header .bannerBox .h-content .banner .screen ul li {
  width: 770px;
  height: 330px;
  overflow: hidden;
  float: left;
  position: relative;
}

html header .bannerBox .h-content .banner .screen ul li .bannerInfo,
body header .bannerBox .h-content .banner .screen ul li .bannerInfo {
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 45px;
  padding: 0px 20px;
  box-sizing: border-box;
  position: absolute;
  top: 285px;
  left: 0px;
  width: 770px;
  height: 45px;
  background: #000;
  opacity: 0.5;
}

html header .bannerBox .h-content .banner .screen ul li img,
body header .bannerBox .h-content .banner .screen ul li img {
  width: 770px;
  height: 330px;
}

html header .bannerBox .h-content .banner ol,
body header .bannerBox .h-content .banner ol {
  position: absolute;
  right: 10px;
  bottom: 15px;
}

html header .bannerBox .h-content .banner ol li,
body header .bannerBox .h-content .banner ol li {
  width: 12px;
  height: 12px;
  background-color: #fff;
  float: left;
  margin-left: 5px;
}

html header .bannerBox .h-content .banner ol > .current,
body header .bannerBox .h-content .banner ol > .current {
  background: #eb4d4c;
}

html header .bannerBox .h-content .right-info,
body header .bannerBox .h-content .right-info {
  height: 330px;
  width: 230px;
  background-color: #fff;
  padding: 0px 5px;
  box-sizing: border-box;
}

html header .bannerBox .h-content .right-info .loginBox,
body header .bannerBox .h-content .right-info .loginBox {
  height: 85px;
  border-bottom: 1px solid #efefef;
  padding-top: 20px;
  box-sizing: border-box;
}

html header .bannerBox .h-content .right-info .loginBox .qqlogo,
body header .bannerBox .h-content .right-info .loginBox .qqlogo {
  float: left;
  margin: 0px 10px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: url(../images/index/qq.gif) no-repeat 0 0;
  background-size: cover;
}

html header .bannerBox .h-content .right-info .loginBox span,
body header .bannerBox .h-content .right-info .loginBox span {
  font-size: 12px;
  color: #999999;
}

html header .bannerBox .h-content .right-info .loginBox span a,
body header .bannerBox .h-content .right-info .loginBox span a {
  font-size: 12px;
}

html header .bannerBox .h-content .right-info .loginBox span a:hover,
body header .bannerBox .h-content .right-info .loginBox span a:hover {
  text-decoration: underline;
}

html header .bannerBox .h-content .right-info .upBox,
body header .bannerBox .h-content .right-info .upBox {
  height: 117px;
  border-bottom: 1px solid #efefef;
  background-color: #fff;
}

html header .bannerBox .h-content .right-info .upBox h3,
body header .bannerBox .h-content .right-info .upBox h3 {
  height: 34px;
  font-size: 12px;
  font-weight: bold;
  line-height: 34px;
  margin-left: 12px;
}

html header .bannerBox .h-content .right-info .upBox div,
body header .bannerBox .h-content .right-info .upBox div {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

html header .bannerBox .h-content .right-info .upBox div dl,
body header .bannerBox .h-content .right-info .upBox div dl {
  text-align: center;
}

html header .bannerBox .h-content .right-info .upBox div dl a,
body header .bannerBox .h-content .right-info .upBox div dl a {
  font-size: 12px;
  color: #3a3f4a;
}

html header .bannerBox .h-content .right-info .upBox div dl a:hover,
body header .bannerBox .h-content .right-info .upBox div dl a:hover {
  color: #f74a4a;
  text-decoration: underline;
}

html header .bannerBox .h-content .right-info .bottmoBox,
body header .bannerBox .h-content .right-info .bottmoBox {
  height: 126px;
}

html header .bannerBox .h-content .right-info .bottmoBox .title,
body header .bannerBox .h-content .right-info .bottmoBox .title {
  height: 34px;
  display: flex;
  align-items: center;
}

html header .bannerBox .h-content .right-info .bottmoBox .title span,
body header .bannerBox .h-content .right-info .bottmoBox .title span {
  margin-left: 10px;
  margin-right: 142px;
  font-size: 12px;
  font-weight: bold;
}

html header .bannerBox .h-content .right-info .bottmoBox .title a,
body header .bannerBox .h-content .right-info .bottmoBox .title a {
  font-size: 12px;
  color: #666;
}

html header .bannerBox .h-content .right-info .bottmoBox ul li,
body header .bannerBox .h-content .right-info .bottmoBox ul li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

html header .bannerBox .h-content .right-info .bottmoBox ul li a,
body header .bannerBox .h-content .right-info .bottmoBox ul li a {
  font-size: 12px;
  color: #999;
}

html header .bannerBox .h-content .right-info .bottmoBox ul li a:hover,
body header .bannerBox .h-content .right-info .bottmoBox ul li a:hover {
  text-decoration: underline;
}

html header .bannerBox .h-content .right-info .bottmoBox ul li span,
body header .bannerBox .h-content .right-info .bottmoBox ul li span {
  font-size: 12px;
  color: #999;
}

html section,
body section {
  background-color: #f3f4f6;
}

html section .content .left-content,
body section .content .left-content {
  float: left;
  width: 950px;
}

html section .content .left-content .c-box .c-title,
body section .content .left-content .c-box .c-title {
  height: 54px;
  background-color: #f3f4f6;
  display: flex;
  align-items: center;
}

html section .content .left-content .c-box .c-title i,
body section .content .left-content .c-box .c-title i {
  display: inline-block;
  background: url(../images/index/sprite1.png) no-repeat -30px -75px;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

html section .content .left-content .c-box .commodity,
body section .content .left-content .c-box .commodity {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

html section .content .left-content .c-box .commodity .box,
body section .content .left-content .c-box .commodity .box {
  padding: 0px 30px;
  box-sizing: border-box;
  width: 316px;
  height: 144px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #f3f4f6;
  border-right: 1px solid #f3f4f6;
}

html section .content .left-content .c-box .commodity .box img,
body section .content .left-content .c-box .commodity .box img {
  width: 80px;
  height: 68px;
  margin-right: 15px;
}

html section .content .left-content .c-box .commodity .box .cInfo,
body section .content .left-content .c-box .commodity .box .cInfo {
  font-size: 12px;
}

html section .content .left-content .c-box .commodity .box .cInfo p,
body section .content .left-content .c-box .commodity .box .cInfo p {
  margin-bottom: 5px;
}

html section .content .left-content .c-box .commodity .box .cInfo a,
body section .content .left-content .c-box .commodity .box .cInfo a {
  color: #3a3f4a;
}

html section .content .left-content .c-box .commodity .box .cInfo a:hover,
body section .content .left-content .c-box .commodity .box .cInfo a:hover {
  color: #f74a4a;
  text-decoration: underline;
}

html section .content .left-content .c-box .commodity .box .cInfo .qb,
body section .content .left-content .c-box .commodity .box .cInfo .qb {
  font-size: 12px;
  color: #f74a4a;
  font-weight: bold;
}

html section .content .left-content .c-box .commodity .box .cInfo button,
body section .content .left-content .c-box .commodity .box .cInfo button {
  display: block;
  border: none;
  border-bottom: 2px solid #e43333;
  width: 90px;
  height: 25px;
  background-color: #f74a4a;
  color: #fff;
  cursor: pointer;
}

html section .content .left-content .like .l-title,
body section .content .left-content .like .l-title {
  height: 54px;
  background-color: #f3f4f6;
  display: flex;
  align-items: center;
}

html section .content .left-content .like .l-title i,
body section .content .left-content .like .l-title i {
  display: inline-block;
  background: url(../images/index/sprite1.png) no-repeat 0px -75px;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

html section .content .left-content .like .l-title span,
body section .content .left-content .like .l-title span {
  margin-right: 10px;
}

html section .content .left-content .like .l-title b,
body section .content .left-content .like .l-title b {
  font-size: 14px;
  color: #e4e3e6;
}

html section .content .left-content .like .l-title a,
body section .content .left-content .like .l-title a {
  font-size: 12px;
  margin-left: 10px;
  margin-top: 5px;
}

html section .content .left-content .like .likeBox,
body section .content .left-content .like .likeBox {
  height: 216px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #fff;
}

html section .content .left-content .like .likeBox dl,
body section .content .left-content .like .likeBox dl {
  text-align: center;
  width: 190px;
  border-right: 1px solid #f3f4f6;
}

html section .content .left-content .like .likeBox dl dt img,
body section .content .left-content .like .likeBox dl dt img {
  width: 90px;
  height: 75px;
  margin: 0 auto;
}

html section .content .left-content .like .likeBox dl dd a,
body section .content .left-content .like .likeBox dl dd a {
  color: 3a3f4a;
  font-size: 12px;
  color: #3a3f4a;
}

html section .content .left-content .like .likeBox dl dd a:hover,
body section .content .left-content .like .likeBox dl dd a:hover {
  color: #f74a4a;
  text-decoration: underline;
}

html section .content .left-content .like .likeBox dl dd span,
body section .content .left-content .like .likeBox dl dd span {
  font-size: 12px;
  color: #f74a4a;
}

html section .content .right-content,
body section .content .right-content {
  float: right;
  width: 230px;
  height: 615px;
  margin-left: 10px;
  background-color: #fff;
}

html section .content .right-content .surprised .title,
body section .content .right-content .surprised .title {
  height: 54px;
  background-color: #f3f4f6;
  display: flex;
  align-items: center;
}

html section .content .right-content .surprised .title i,
body section .content .right-content .surprised .title i {
  display: inline-block;
  background: url(../images/index/sprite1.png) no-repeat -60px -73px;
  width: 22px;
  height: 22px;
  margin-right: 10px;
}

html section .content .right-content .surprised img,
body section .content .right-content .surprised img {
  margin: 0 auto;
  margin-bottom: 17px;
}

html section .content .right-content .qd,
body section .content .right-content .qd {
  position: relative;
}

html section .content .right-content .qd i,
body section .content .right-content .qd i {
  background: url(../images/index/sprite1.png) no-repeat 0 -75px;
  width: 20px;
  height: 20px;
}

html section .content .right-content .qd .box,
body section .content .right-content .qd .box {
  text-align: center;
}

html section .content .right-content .qd .box button,
body section .content .right-content .qd .box button {
  margin: 0 auto;
  margin-top: 35px;
  margin-bottom: 10px;
  width: 190px;
  height: 78px;
  background-color: #f74a4a;
  border: none;
  border-bottom: 2px solid #e43333;
  display: flex;
  justify-content: center;
  align-items: center;
}

html section .content .right-content .qd .box button i,
body section .content .right-content .qd .box button i {
  display: inline-block;
  background: url(../images/index/sprite1.png) no-repeat -140px -136px;
  width: 27px;
  height: 26px;
  margin-right: 10px;
}

html section .content .right-content .qd .box button span,
body section .content .right-content .qd .box button span {
  font-size: 18px;
  color: #fff;
}

html section .content .right-content .qd .box p,
body section .content .right-content .qd .box p {
  font-size: 12px;
  margin-bottom: 5px;
}

html section .content .right-content .qd .erma,
body section .content .right-content .qd .erma {
  display: none;
  text-align: center;
  position: absolute;
  top: 54px;
  left: 0;
}

html section .content .right-content .qd .erma img,
body section .content .right-content .qd .erma img {
  width: 230px;
  height: 216px;
  margin-bottom: 0px;
}

html section .content .right-content .qd .erma span,
body section .content .right-content .qd .erma span {
  font-size: 12px;
}

html section .content .right-content .qd:hover .erma,
body section .content .right-content .qd:hover .erma {
  display: block;
}

html section .content2 .title,
body section .content2 .title {
  height: 54px;
  width: 100%;
  background-color: #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

html section .content2 .title .left i,
body section .content2 .title .left i {
  display: inline-block;
  background: url(../images/index/sprite1.png) no-repeat -94px -78px;
  width: 14px;
  height: 14px;
}

html section .content2 .title a,
body section .content2 .title a {
  font-size: 12px;
}

html section .content2 .conBox,
body section .content2 .conBox {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background-color: #fff;
}

html section .content2 .conBox a,
body section .content2 .conBox a {
  margin-top: 10px;
}

html section .content2 .conBox a:nth-child(4),
body section .content2 .conBox a:nth-child(4) {
  margin-bottom: 10px;
}

html section .content2 .conBox a:nth-child(5),
body section .content2 .conBox a:nth-child(5) {
  margin-bottom: 10px;
}

html section .content2 .conBox a:nth-child(6),
body section .content2 .conBox a:nth-child(6) {
  margin-bottom: 10px;
}

html section .gameBox .game-title,
body section .gameBox .game-title {
  height: 54px;
  background-color: #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}

html section .gameBox .game-title .tle i,
body section .gameBox .game-title .tle i {
  display: inline-block;
  background: url(../images/index/sprite1.png) no-repeat -120px -75px;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

html section .gameBox .game-title .tle .ticon2,
body section .gameBox .game-title .tle .ticon2 {
  background: url(../images/index/sprite1.png) no-repeat -150px -75px;
}

html section .gameBox .game-title .tle .ticon3,
body section .gameBox .game-title .tle .ticon3 {
  background: url(../images/index/sprite1.png) no-repeat -180px -75px;
}

html section .gameBox .game-title .tle .ticon4,
body section .gameBox .game-title .tle .ticon4 {
  background: url(../images/index/sprite1.png) no-repeat -120px -105px;
}

html section .gameBox .game-title a,
body section .gameBox .game-title a {
  color: #1994eb;
  font-size: 12px;
}

html section .gameBox .gameCon,
body section .gameBox .gameCon {
  height: 304px;
  display: flex;
}

html section .gameBox .gameCon .game-left,
body section .gameBox .gameCon .game-left {
  width: 240px;
}

html section .gameBox .gameCon .game-center,
body section .gameBox .gameCon .game-center {
  width: 764px;
  background-color: #fff;
}

html section .gameBox .gameCon .game-center .upBox,
body section .gameBox .gameCon .game-center .upBox {
  height: 204px;
}

html section .gameBox .gameCon .game-center .upBox ul,
body section .gameBox .gameCon .game-center .upBox ul {
  height: 204px;
}

html section .gameBox .gameCon .game-center .upBox ul li,
body section .gameBox .gameCon .game-center .upBox ul li {
  float: left;
  border-right: 1px solid #f3f4f6;
  width: 190px;
  height: 204px;
  overflow: hidden;
  position: relative;
}

html section .gameBox .gameCon .game-center .upBox ul li a,
body section .gameBox .gameCon .game-center .upBox ul li a {
  position: absolute;
  left: 20px;
  top: 20px;
  display: block;
  width: 148px;
  height: 163px;
  border-bottom: 1px solid #f3f4f6;
  line-height: 20px;
}

html section .gameBox .gameCon .game-center .upBox ul li a span,
body section .gameBox .gameCon .game-center .upBox ul li a span {
  display: block;
}

html section .gameBox .gameCon .game-center .upBox ul li a span:nth-child(1),
body section .gameBox .gameCon .game-center .upBox ul li a span:nth-child(1) {
  height: 20px;
  margin-bottom: 3px;
  font-size: 16px;
  font-weight: 800;
  color: #000;
}

html section .gameBox .gameCon .game-center .upBox ul li a span:nth-child(2),
body section .gameBox .gameCon .game-center .upBox ul li a span:nth-child(2) {
  font-size: 12px;
  height: 20px;
  color: #f74a4a;
}

html section .gameBox .gameCon .game-center .upBox ul li a span:nth-child(2) b,
body section .gameBox .gameCon .game-center .upBox ul li a span:nth-child(2) b {
  font-weight: bold;
}

html section .gameBox .gameCon .game-center .upBox ul li a span:nth-child(3),
body section .gameBox .gameCon .game-center .upBox ul li a span:nth-child(3) {
  color: #000;
  font-size: 12px;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}

html section .gameBox .gameCon .game-center .upBox ul li a img,
body section .gameBox .gameCon .game-center .upBox ul li a img {
  margin-top: 10px;
  width: 90px;
  height: 75px;
}

html section .gameBox .gameCon .game-center .downBox,
body section .gameBox .gameCon .game-center .downBox {
  height: 100px;
}

html section .gameBox .gameCon .game-center .downBox ul li,
body section .gameBox .gameCon .game-center .downBox ul li {
  float: left;
  border-right: 1px solid #f3f4f6;
  width: 170px;
  height: 60px;
  padding: 20px 0px 20px 20px;
  line-height: 20px;
}

html section .gameBox .gameCon .game-center .downBox ul li a,
body section .gameBox .gameCon .game-center .downBox ul li a {
  color: #3a3f4a;
}

html section .gameBox .gameCon .game-center .downBox ul li a img,
body section .gameBox .gameCon .game-center .downBox ul li a img {
  float: left;
  width: 60px;
  height: 50px;
}

html section .gameBox .gameCon .game-center .downBox ul li div,
body section .gameBox .gameCon .game-center .downBox ul li div {
  margin-left: 70px;
}

html section .gameBox .gameCon .game-center .downBox ul li div p,
body section .gameBox .gameCon .game-center .downBox ul li div p {
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

html section .gameBox .gameCon .game-center .downBox ul li div p:nth-child(1) a:hover,
body section .gameBox .gameCon .game-center .downBox ul li div p:nth-child(1) a:hover {
  color: #f74a4a;
  text-decoration: underline;
}

html section .gameBox .gameCon .game-center .downBox ul li div p:nth-child(2),
body section .gameBox .gameCon .game-center .downBox ul li div p:nth-child(2) {
  color: #f74a4a;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}

html section .gameBox .gameCon .game-center .downBox ul li div p:nth-child(2) b,
body section .gameBox .gameCon .game-center .downBox ul li div p:nth-child(2) b {
  font-weight: bold;
}

html section .gameBox .gameCon .game-right,
body section .gameBox .gameCon .game-right {
  width: 186px;
  background-color: #fff;
}

html section .gameBox .gameCon .game-right dl dd,
body section .gameBox .gameCon .game-right dl dd {
  height: 43px;
  border-top: 1px solid #f3f4f6;
  padding: 5px 5px 5px 0;
}

html section .gameBox .gameCon .game-right dl dd i,
body section .gameBox .gameCon .game-right dl dd i {
  float: left;
  width: 20px;
  height: 24px;
  background: url(../images/index/sprite1.png) no-repeat;
  background-position: -20px -300px;
  font-style: normal;
  color: #fff;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
}

html section .gameBox .gameCon .game-right dl dd div,
body section .gameBox .gameCon .game-right dl dd div {
  float: left;
  width: 88px;
  margin: 0 0 0 10px;
  display: inline;
}

html section .gameBox .gameCon .game-right dl dd div a,
body section .gameBox .gameCon .game-right dl dd div a {
  font-size: 12px;
  color: #000;
}

html section .gameBox .gameCon .game-right dl dd div a:hover,
body section .gameBox .gameCon .game-right dl dd div a:hover {
  color: #eb4d4c;
  text-decoration: underline;
}

html section .gameBox .gameCon .game-right dl dd div b,
body section .gameBox .gameCon .game-right dl dd div b {
  font-size: 12px;
  color: #eb4d4c;
}

html section .gameBox .gameCon .game-right dl dd a img,
body section .gameBox .gameCon .game-right dl dd a img {
  float: right;
  width: 40px;
  height: 34px;
  margin-top: 1px;
}

html section .gameBox .gameCon .game-right dl .top,
body section .gameBox .gameCon .game-right dl .top {
  padding-top: 20px;
  height: 62px;
  border-top: 0;
}

html section .gameBox .gameCon .game-right dl .top i,
body section .gameBox .gameCon .game-right dl .top i {
  float: left;
  display: block;
  width: 20px;
  background: url(../images/index/sprite1.png) no-repeat;
  height: 53px;
  background-position: 0 -300px;
  line-height: 16px;
  color: #fff;
  font-size: 12px;
  text-align: center;
}

html section .gameBox .gameCon .game-right dl .top .txt,
body section .gameBox .gameCon .game-right dl .top .txt {
  float: left;
  width: 88px;
  margin: 0 0 0 10px;
  display: inline;
}

html section .gameBox .gameCon .game-right dl .top .txt a,
body section .gameBox .gameCon .game-right dl .top .txt a {
  font-size: 12px;
  color: #000;
}

html section .gameBox .gameCon .game-right dl .top .txt a:hover,
body section .gameBox .gameCon .game-right dl .top .txt a:hover {
  color: #eb4d4c;
  text-decoration: underline;
}

html section .gameBox .gameCon .game-right dl .top .txt b,
body section .gameBox .gameCon .game-right dl .top .txt b {
  font-size: 12px;
  color: #eb4d4c;
}

html section .gameBox .gameCon .game-right dl .top a img,
body section .gameBox .gameCon .game-right dl .top a img {
  float: right;
  margin-top: 1px;
  width: 60px;
  height: 50px;
}

html section .footImg,
body section .footImg {
  display: flex;
  justify-content: space-between;
}

html section .footImg a,
body section .footImg a {
  margin: 20px 0px 40px 0px;
}

html footer,
body footer {
  height: 358px;
  background-color: #3b3f4a;
}

html footer .footBox,
body footer .footBox {
  height: 358px;
}

html footer .footBox .upFoot,
body footer .footBox .upFoot {
  height: 210px;
  padding-top: 25px;
  padding-bottom: 30px;
  box-sizing: border-box;
  display: flex;
}

html footer .footBox .upFoot dl,
body footer .footBox .upFoot dl {
  width: 226px;
  height: 150px;
  border-right: 1px solid #444853;
}

html footer .footBox .upFoot dl dt,
body footer .footBox .upFoot dl dt {
  height: 32px;
  display: flex;
  align-items: center;
}

html footer .footBox .upFoot dl dt i,
body footer .footBox .upFoot dl dt i {
  margin: 0 10px 0 24px;
  background: url(../images/index/sprite1.png) no-repeat;
  width: 32px;
  height: 32px;
}

html footer .footBox .upFoot dl dt span,
body footer .footBox .upFoot dl dt span {
  font-size: 16px;
  color: #a5aab4;
}

html footer .footBox .upFoot dl dt .i1,
body footer .footBox .upFoot dl dt .i1 {
  background-position: 0 -136px;
}

html footer .footBox .upFoot dl dt .i2,
body footer .footBox .upFoot dl dt .i2 {
  background-position: -32px -136px;
}

html footer .footBox .upFoot dl dt .i3,
body footer .footBox .upFoot dl dt .i3 {
  background-position: -63px -136px;
}

html footer .footBox .upFoot dl dt .i4,
body footer .footBox .upFoot dl dt .i4 {
  background-position: -95px -136px;
}

html footer .footBox .upFoot dl dd,
body footer .footBox .upFoot dl dd {
  margin-left: 68px;
  height: 24px;
  line-height: 24px;
}

html footer .footBox .upFoot dl dd a,
body footer .footBox .upFoot dl dd a {
  font-size: 12px;
  color: #a5aab4;
}

html footer .footBox .upFoot dl dd a:hover,
body footer .footBox .upFoot dl dd a:hover {
  text-decoration: underline;
}

html footer .footBox .upFoot dl dd img,
body footer .footBox .upFoot dl dd img {
  margin-top: 18px;
}

html footer .footBox .upFoot .footlist,
body footer .footBox .upFoot .footlist {
  text-align: center;
  font-size: 16px;
  color: #a5aab4;
}

html footer .footBox .upFoot .footlist li,
body footer .footBox .upFoot .footlist li {
  float: left;
  margin-left: 30px;
  width: 100px;
}

html footer .footBox .upFoot .footlist li img,
body footer .footBox .upFoot .footlist li img {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

html footer .footBox .downFoot,
body footer .footBox .downFoot {
  height: 148px;
  text-align: center;
  border-top: 1px solid #444853;
  padding-top: 35px;
  box-sizing: border-box;
}

html footer .footBox .downFoot p,
html footer .footBox .downFoot a,
body footer .footBox .downFoot p,
body footer .footBox .downFoot a {
  color: #a5a5a5;
  font-size: 12px;
}

html footer .footBox .downFoot a:hover,
body footer .footBox .downFoot a:hover {
  text-decoration: underline;
}

html footer .footBox .downFoot ul,
body footer .footBox .downFoot ul {
  display: flex;
  justify-content: center;
}

html footer .footBox .downFoot ul li,
body footer .footBox .downFoot ul li {
  font-size: 12px;
  color: #a5a5a5;
}

html footer .footBox .downFoot ul li a,
body footer .footBox .downFoot ul li a {
  color: #a5a5a5;
  margin: 0px 5px;
  font-size: 12px;
}

html footer .backTop,
body footer .backTop {
  position: fixed;
  top: 400px;
  right: 20px;
  text-align: center;
}

html footer .backTop a,
body footer .backTop a {
  display: block;
  border: 1px solid #e1e1e1;
  background: #fff;
  width: 68px;
  padding: 7px 0;
  margin-top: 3px;
  font-size: 12px;
  color: #000;
}

html footer .backTop a:hover,
body footer .backTop a:hover {
  background-color: #ee4545;
  color: #fff;
}

html footer .backTop a:hover i,
body footer .backTop a:hover i {
  background: url(../images/index/sprite2.png) no-repeat -161px -160px;
}

html footer .backTop .bTop,
body footer .backTop .bTop {
  height: 65px;
}

html footer .backTop .bTop i,
body footer .backTop .bTop i {
  display: block;
  background: url(../images/index/sprite2.png) no-repeat -122px -160px;
  width: 30px;
  height: 15px;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 12px;
}

html footer .backTop .dTop,
body footer .backTop .dTop {
  height: 35px;
  line-height: 35px;
}
